<%--
  Created by IntelliJ IDEA.
  User: Markrui
  Date: 2016/3/12
  Time: 21:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="header.jsp" %>

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">认证用户管理</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-sm-12" >
            <%--<button type="button" data-toggle="modal" class="btn btn-primary" data-target="#group_modal" data-backdrop="static">添加</button>--%>
            <%--<br><br>--%>
        </div>
        <div class="col-sm-12">
            <br>
            <table id="group_table" class="table table-hover table-bordered table-striped table-striped">
                <thead>
                <tr>
                    <td>序号</td>
                    <td>角色</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!-- /.row -->
</div>

<%--modal view--%>
<div id="group_modal" class="modal fade">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">认证角色</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-1"></div>
                        <div class="col-sm-3" style="padding-top:5px">
                            <label for="groupId" class="control-label">申请职位</label>
                        </div>
                        <div class="col-sm-6" style="padding-top:5px">
                            <label class="control-label" id="groupId" name="groupId">

                            </label>
                        </div>
                    </div>

                    <div id="add"></div>
                </div>
            </div>
            <div class="modal-footer">
                <%--<button class="btn btn-primary" onclick="save()">保存</button>--%>
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<%--modal delete--%>


<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">user management</div>
        <div class="am-modal-bd">
            你，确定要删除这条记录吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>



<!-- /#page-wrapper -->
<%@include file="footer.jsp" %>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
<script src="../../assets/js/amazeui.min.js"></script>

<script>
    var editor = {
        name : "",
        control : ""
    };
    var editorList = [];
    $(document).ready(function() {
        loadTable();
//        $("#type").on( 'change', function (e) {
//            console.log($(this).val());
//            if($(this).val() != "2"){
//                $("#valueTemplate").html('<textarea name="valueTemplate" id="" class="form-control"></textarea>');
//            }
//        });
    });
    var table;
    function loadTable(){
        $.ajax({
            url: rootUrl+'mng/group',
            type: 'get',
            dataType: 'json'
        })
        .success(function(data){
            table = $('#group_table').DataTable({
                "bProcessing": true,
                "bDestroy": true,
                "sPaginationType" : "full_numbers",
                "oLanguage" : {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "抱歉， 没有找到",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有数据",
                    "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                    "sZeroRecords": "没有检索到数据",
                    "sSearch": "搜索: &nbsp",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "前一页",
                        "sNext": "后一页",
                        "sLast": "尾页"
                    }
                },
                "data":data.data.groups,
                "columns": [
                    { "data": 'id' },
                    { "data": 'name' },
                    { "data": 'groupId' },
                ],
                "columnDefs": [
                    {
                        "targets": 0,
                        "render": function (data, type, row, table) {
                            return table.row + 1;
                        }
                    },
                    {
                        "targets": -1,
                        "render": function (data, type, row, table) {
                            return '<button class="btn btn-primary" onclick="view(\''+data+'\')">查看</button>' +
                                    '<button id="'+data+'" class="btn btn-danger" onclick="deleteClick('+data+',this)">删除</button>';
                        }
                    }]
            });
        });
    }

    function deleteClick(id,ele) {
        $('#my-confirm').modal({
            relatedTarget: ele,
            onConfirm: function(options) {
                var $link = $(this.relatedTarget);
                console.log("数据：",$link.attr("id"));
                deleteGroupEntity($link.attr("id"));
            },
            // closeOnConfirm: false,
            onCancel: function() {
            }
        });
    }

    function deleteGroupEntity(groupId){
        $.ajax({
            url: rootUrl+'mng/group/'+groupId,
            type: 'delete',
            dataType: 'json'
        }).success(function(data){
            loadTable();
        }).error(function(){
            alert("删除失败");
        });
    }

    function view(groupId){
        $.ajax({
            url: rootUrl+'mng/group/'+groupId,
            type: 'get',
            dataType: 'json'
        })
        .success(function(data){
            $("#groupId").html(data.data.group.name);
            var groupForms = data.data.group.groupForms;
            console.log(groupForms);
            $("#add").html("");
            for(var j = 0; j < groupForms.length; j++){
                var addHtml = "";
                addHtml += '<div class="col-sm-12">'+
                        '<br>'+
                        '<div class="col-sm-1"></div>'+
                        '<div class="col-sm-3" style="padding-top:5px">'+
                        '<label for="name" class="control-label">'+groupForms[j].label+'</label>'+
                        '</div>'+
                        '<div class="col-sm-6">';
                var type = "";
                if(groupForms[j].type == 0){
                    type = '<input id="name"  type="text" class="form-control" name="'+groupForms[j].groupFormId+'" />';
                }else if(groupForms[j].type == 1){
                    type = '<select class="form-control" name="'+groupForms[j].groupFormId+'">';
                    var option = groupForms[j].valueTemplate.split("#");
                    for(var k = 0; k < option.length; k++){
                        if(option[k] != ""){
                            type += '<option value="'+option[k]+'" class="form-control">'+option[k]+'</option>';
                        }
                    }
                    type += '</select>';
                }else if(groupForms[j].type == 2){
                    type = '<input id="name"  type="file" class="form-control" name="'+groupForms[j].groupFormId+'" />';
                }else if(groupForms[j].type == 3){
                    type = '<textarea id="name" class="form-control" name="'+groupForms[j].groupFormId+'" /></textarea>';
                }else if(groupForms[j].type == 4){
                    type = '<textarea id="name" class="form-control" name="'+groupForms[j].groupFormId+'" /></textarea>';
                }
                addHtml += type+
                        '</div>'+
                        '</div>';
                $("#add").append(addHtml);
                if(groupForms[j].type == 4){
                    var e = CKEDITOR.replace(groupForms[j].groupFormId.toString(), { toolbar:'Basic', height:270 });
                    editor.name = groupForms[j].groupFormId;
                    editor.control = e;
                    editorList.push(editor);
                }
            }
            $('#group_modal').modal({
                backdrop : "static"
            });
        });
    }
    function add(){
        $("#add").append('<div class="col-sm-12"><br>'+
                '<div class="col-sm-1"></div>'+
                '<div class="col-sm-3" style="padding-top:5px">'+
                '<label for="label" class="control-label">标题名：</label>'+
        '</div>'+
        '<div class="col-sm-6">'+
                '<input id="label" name="label" class="form-control" />'+
               '</div>'+
                '</div>'+
                '<div class="col-sm-12">'+
                '<br>'+
                '<div class="col-sm-1"></div>'+
                '<div class="col-sm-3" style="padding-top:5px">'+
                '<label for="type" class="control-label">标签类型：</label>'+
        '</div>'+
        '<div class="col-sm-6">'+
                '<select class="form-control" id="type" name="type">'+
                '<option value="0">输入框</option>'+
                '<option value="1">选择框</option>'+
                '<option value="2">文件</option>'+
                '<option value="3">文本框</option>'+
                '</select>'+
                '</div>'+
                '</div>'+
                '<div class="col-sm-12">'+
                '<br>'+
                '<div class="col-sm-1"></div>'+
                '<div class="col-sm-3" >'+
                 '</div>'+
                '<div id="choice" name="type" class="col-sm-6">'+
                '</div>'+
                '</div>'+
                '<div class="col-sm-12">'+
                '<br>'+
                '<div class="col-sm-1"></div>'+
                '<div class="col-sm-3" >'+
                '</div>'+
                '<div id="valueTemplate" class="col-sm-6">'+
                '<textarea name="valueTemplate" id="" class="form-control"></textarea>'+
                '</div>'+
                '</div>');
    }
</script>